<template>
	<view class="pages">
	    <!-- 头部导航 -->
	    <uni-nav-bar left-icon="left"    :statusBar="true" titleSize="30px" leftText="返回"   title="新增物流"  @clickLeft="back"   :fixed="true" backgroundColor="#3286ed" color="#fff"/>
	   <!-- 出库单信息 -->
		<u--form class="form" labelPosition="left" labelWidth="100px" :model="Outform" ref="form">
	    	<u-form-item  label="租赁订单" prop="orderNo" borderBottom ref="item1"  >
	    		<u--input :readonly="true" v-model="Outform.orderNo" border="none" placeholder="租赁订单"></u--input>
	    	</u-form-item>
			<u-form-item  label="出库单编号" prop="outboundNo" borderBottom ref="item1"  >
				<u--input :readonly="true" v-model="Outform.outboundNo" border="none" placeholder="出库订单"></u--input>
			</u-form-item>
			<u-form-item  label="业务员" prop="salesmanName" borderBottom ref="item1"  >
				<u--input :readonly="true" v-model="Outform.salesmanName" border="none" placeholder="业务员"></u--input>
			</u-form-item>
			<u-form-item  label="客户名称" prop="customerName" borderBottom ref="item1"  >
				<u--input :readonly="true" v-model="Outform.customerName" border="none" placeholder="客户名称"></u--input>
			</u-form-item>
			<u-form-item  label="项目名称" prop="projectName" borderBottom ref="item1"  >
				<u--input :readonly="true" v-model="Outform.projectName" border="none" placeholder="客户名称"></u--input>
			</u-form-item>
			<u-form-item  label="对接人" prop="consigneeName" borderBottom ref="item1"  >
				<u--input :readonly="true" v-model="Outform.consigneeName" border="none" placeholder="对接人"></u--input>
			</u-form-item>
			<u-form-item  label="对接人电话" prop="consigneeTel" borderBottom ref="item1"  >
				<u--input :readonly="true" v-model="Outform.consigneeTel" border="none" placeholder="对接人电话"></u--input>
			</u-form-item>
			<u-form-item  label="发货仓库名" prop="deliveryWarehouseName" borderBottom ref="item1"  >
				<u--input :readonly="true" v-model="Outform.deliveryWarehouseName" border="none" ></u--input>
			</u-form-item>
			<u-form-item  label="收货地址" prop="address" borderBottom ref="item1"  >
				<u-text   :readonly="true" :text="Outform.address" border="none" ></u-text>
			</u-form-item>
			<u-form-item  label="订单产品" prop="productList" borderBottom ref="item1"  >
			
			</u-form-item>
			<view class="">
				<uni-table border stripe emptyText="暂无更多数据" >
					<!-- 表头行 -->
					<uni-tr>
						<uni-th align="center" width="100px">产品名称</uni-th>
						<uni-th align="center" width="100px">型号</uni-th>
						<uni-th align="center" width="60px">数量</uni-th>
						<uni-th align="center" width="100px">出库数量</uni-th>
						<uni-th align="center" width="100px">未出库数量</uni-th>
						<uni-th align="center" width="100px">回货数量</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="(item,index) in Outform.productList" :key="item.productId">
						<uni-td align="center">{{item.productName}}</uni-td>
						<uni-td align="center">{{item.model}}</uni-td>
						<uni-td align="center">{{item.quantity}}</uni-td>
						<uni-td align="center">{{item.deliveryQuantity}}</uni-td>
						<uni-td align="center">{{item.undeliveryQuantity}}</uni-td>
						<uni-td align="center">{{item.returnQuantity}}</uni-td>
					</uni-tr>
				</uni-table>
			</view>
			
			<u-form-item  label="辅料说明" prop="accessoriesInstruction" borderBottom ref="item1"  >
				<u--input :readonly="true" v-model="Outform.materialSpecification" border="none" ></u--input>
			</u-form-item>
			<u-form-item  label="是否需要车辆" prop="logistics" borderBottom ref="item1"  >
				 <u-text v-if="Outform.logistics==1" text="是"></u-text>
				 <u-text v-if="Outform.logistics==2" text="否"></u-text>
			</u-form-item>
		</u--form>
		<!-- 物流信息 -回显-->
		<view  v-for="(item,index) in logisicList">
			 <view style="display: flex;justify-content: space-between;margin: 5px 10px;color: skyblue;">
			 	<span style="display: block;">物流{{index+1}}</span>
				<span style="display: block;" @click="editlogistic(item)">修改</span>
			 </view>
			<u--form class="form" labelPosition="left" labelWidth="100px" :model="item" ref="form">
				<u-form-item  label="出库单编号" prop="orderNo" borderBottom ref="item1"  >
					<u--input :readonly="true" v-model="item.outboundNo" border="none" placeholder="租赁订单"></u--input>
				</u-form-item>
				<u-form-item  label="出入库类型" prop="orderProperty" borderBottom ref="item1"  >
					 <u-text v-if="item.orderProperty==1" text="出库"></u-text>
					 <u-text v-if="item.orderProperty==2" text="入库"></u-text>
				</u-form-item>
				<u-form-item  label="发货仓库名" prop="warehouseName" borderBottom ref="item1"  >
					<u--input :readonly="true" v-model="item.warehouseName" border="none" placeholder="对接人"></u--input>
				</u-form-item>
				<u-form-item  label="运输方式" prop="shippingType" borderBottom ref="item1"  >
					<u-text v-if="item.shippingType=='0'" text="快递"></u-text>
					<u-text v-if="item.shippingType=='1'" text="物流"></u-text>
					<u-text v-if="item.shippingType=='2'" text="自提"></u-text>
					<u-text v-if="item.shippingType=='3'" text="专车"></u-text>
				</u-form-item>
				 <u-form-item  label="对接人" prop="consigneeName" borderBottom ref="item1"  >
				 	<u--input :readonly="true" v-model="item.consigneeName" border="none" placeholder="对接人"></u--input>
				 </u-form-item>
				 <u-form-item  label="对接人电话" prop="consigneeTel" borderBottom ref="item1"  >
				 	<u--input :readonly="true" v-model="item.consigneeTel" border="none" placeholder="对接人电话"></u--input>
				 </u-form-item>
				<u-form-item  label="司机名称" prop="driverName" borderBottom ref="item1">
					<u--input v-model="item.driverName" border="none" placeholder="请输入司机名称"></u--input>
				</u-form-item>
				
				<u-form-item  label="司机联系方式" prop="driverTel" borderBottom ref="item1">
					<u--input v-model="item.driverTel" border="none" placeholder="司机联系方式"></u--input>
				</u-form-item>
				<u-form-item  label="车辆信息" prop="vehicleInformation" borderBottom ref="item1">
					<u--input v-model="item.vehicleInformation" border="none" placeholder="车辆信息"></u--input>
				</u-form-item>
				<u-form-item  label="项目地址" prop="projectAddress" borderBottom ref="item1">
					<u--text :text="item.projectAddress" border="none" placeholder="请输入司机名称"></u--text>
				</u-form-item>
				<u-form-item  label="物流费用" prop="logisticsExpenses" borderBottom ref="item1">
					<u--input v-model="item.logisticsExpenses" border="none" placeholder="物流费用"></u--input>
				</u-form-item>
				<u-form-item @click="arrivalDateShow=true"  label="到货日期" prop="arrivalDate" borderBottom ref="item1">
					<u--input readonly v-model="item.arrivalDate" border="none" placeholder="到货日期"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item    label="出库产品"   borderBottom ref="item1">
					 
				</u-form-item>
				<view  style="padding-right: 5xp;">
					<uni-table border stripe emptyText="暂无更多数据" >
						<!-- 表头行 -->
						<uni-tr>
							<uni-th align="center" width="70px">产品名称</uni-th>
							<uni-th align="center" width="60px">型号</uni-th>
							<uni-th align="center" width="50px">数量</uni-th>
							 
						</uni-tr>
						<!-- 表格数据行 -->
						<uni-tr v-for="(item,index) in item.logisticsProductList" :key="index">
							<uni-td align="center">{{item.productName}}</uni-td>
							<uni-td align="center">{{item.model}}</uni-td>
							<uni-td align="center">
								<template slot-scope="scope">
									<input v-model="item.quantity" type="text">
								</template>
							</uni-td>
							 
						</uni-tr>
					</uni-table>
				</view>
				</u--form>
		</view>
		
		<view style="width: 100%; height: 40px;;position: relative;">
			<u-button   @click="addlogInfo" style="width: 70px;height: 30px;margin-top: 10px; position: absolute;right: 10px;" :customStyle="{'transform': 'scale(0.9)'}" type="primary" text="添加物流"></u-button>
		</view>
		<view  v-if="logicShow">
			<u--form class="form" labelPosition="left" labelWidth="100px" :model="addlogisticForm" ref="form">
				<u-form-item  label="出库单编号" prop="orderNo" borderBottom ref="item1"  >
					<u--input :readonly="true" v-model="addlogisticForm.outboundNo" border="none" placeholder="出库单编号"></u--input>
				</u-form-item>
				<u-form-item  label="出入库类型" prop="orderProperty" borderBottom ref="item1"  >
					 <u-text v-if="addlogisticForm.orderProperty==1" text="出库"></u-text>
					 <u-text v-if="addlogisticForm.orderProperty==2" text="入库"></u-text>
				</u-form-item>
				<u-form-item  label="业务员名称" prop="salesmanName" borderBottom ref="item1"  >
					<u--input   v-model="addlogisticForm.salesmanName" border="none" placeholder="业务员"></u--input>
				</u-form-item>
				
				<u-form-item  label="发货仓库名" prop="warehouseName" borderBottom ref="item1"  >
					<u--input :readonly="true" v-model="addlogisticForm.warehouseName" border="none" placeholder="仓库"></u--input>
				</u-form-item>
				<u-form-item  label="运输方式" prop="shippingType" borderBottom ref="item1"  >
					<u-text v-if="addlogisticForm.shippingType=='0'" text="快递"></u-text>
					<u-text v-if="addlogisticForm.shippingType=='1'" text="物流"></u-text>
					<u-text v-if="addlogisticForm.shippingType=='2'" text="自提"></u-text>
					<u-text v-if="addlogisticForm.shippingType=='3'" text="专车"></u-text>
				</u-form-item>
				 <!-- <u-form-item  label="对接人" prop="consigneeName" borderBottom ref="item1"  >
				 	<u--input :readonly="true" v-model="addlogisticForm.consigneeName" border="none" placeholder="对接人"></u--input>
				 </u-form-item>
				 <u-form-item  label="对接人电话" prop="consigneeTel" borderBottom ref="item1"  >
				 	<u--input :readonly="true" v-model="addlogisticForm.consigneeTel" border="none" placeholder="对接人电话"></u--input>
				 </u-form-item> -->
				<u-form-item  label="司机名称" prop="driverName" borderBottom ref="item1">
					<u--input v-model="addlogisticForm.driverName" border="none" placeholder="请输入司机名称"></u--input>
				</u-form-item>
				
				<u-form-item  label="司机联系方式" prop="driverTel" borderBottom ref="item1">
					<u--input v-model="addlogisticForm.driverTel" border="none" placeholder="司机联系方式"></u--input>
				</u-form-item>
				<u-form-item  label="车辆信息" prop="vehicleInformation" borderBottom ref="item1">
					<u--input v-model="addlogisticForm.vehicleInformation" border="none" placeholder="车辆信息"></u--input>
				</u-form-item>
				<!-- <u-form-item  label="项目地址" prop="projectAddress" borderBottom ref="item1">
					<u--text :text="addlogisticForm.projectAddress" border="none" placeholder="请输入司机名称"></u--text>
				</u-form-item> -->
				<u-form-item  label="物流费用" prop="logisticsExpenses" borderBottom ref="item1">
					<u--input v-model="addlogisticForm.logisticsExpenses" border="none" placeholder="物流费用"></u--input>
				</u-form-item>
				<u-form-item   label="到货日期" prop="arrivalDate" borderBottom ref="item1">
					<u--input :clearable="true" v-model="addlogisticForm.arrivalDate" border="none" placeholder="到货日期"></u--input>
						<u-icon @click="arrivalDateShow=true" slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item    label="出库产品"   borderBottom ref="item1">
					 
				</u-form-item>
				<view  style="padding-right: 5xp;margin-bottom: 5px;">
					<uni-table border stripe emptyText="暂无更多数据" >
						<!-- 表头行 -->
						<uni-tr>
							<uni-th align="center" width="70px">产品名称</uni-th>
							<uni-th align="center" width="60px">型号</uni-th>
							<uni-th align="center" width="50px">数量</uni-th>
							 
						</uni-tr>
						<!-- 表格数据行 -->
						<uni-tr v-for="(item,index) in addlogisticForm.logisticsProductList" :key="index">
							<uni-td align="center">{{item.productName}}</uni-td>
							<uni-td align="center">{{item.model}}</uni-td>
							<uni-td align="center">
								<template slot-scope="scope">
									<input @input="isquantity(item,index)"  v-model="item.quantity" type="text"/>
								</template>
							</uni-td>
							 
						</uni-tr>
					</uni-table>
				</view>
				</u--form>
			 <view style="display: flex;justify-content: center;">
			 	 <u-button style="width: 300px;margin: 10px;" type="success" @click="btnLogic">提交</u-button>
			 </view>
		</view>
		<u-datetime-picker :closeOnClickOverlay="true" @close="arrivalDateShow=false"
		    :show="arrivalDateShow" v-model="dateNow" @confirm="arrivalDateConfirm"
		    @cancel="arrivalDateShow=false" mode="date"></u-datetime-picker>
	<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {outOrderinfo,getNoApi,addOrderApi} from '@/api/out/out.js'
	import{listOrder,getOrder} from '@/api/order/order.js'
	import {addLogisticsApi,getLogisticsListApi} from '@/api/logistics.js'
import colorGradient from '../../../uni_modules/uview-ui/libs/function/colorGradient';
	export default {
		data() {
			return {
				Outform:{
					orderNo:'',
					outboundNo:'',
					salesmanName:'',
					customerName:'',
					consigneeName:'',
					consigneeTel:'',
					projectName:'',
					deliveryWarehouseName:'',
					address:'',
					productList:[],
					accessoriesInstruction:'',
					shippingType:'',
					logistics:'',
					sponsor:''
				},
				outId:'',//出库单id
				logicShow:false,
				addlogisticForm:{
					orderId:'',
					orderProperty:'1',
					logisticsExpenses:'',
					projectName:'',
					orderNo:'',
					projectAddress:'',
					shippingType:'',
					 
					driverName:'',
					driverTel:'',
					vehicleInformation:'',
					logisticsStatus:'',
					warehouseName:'',
					outboundNo:'',
					returnApplyNo:'',
					type:'',
					logisticsType:'',
					arrivalDate:'',
					logisticsProductList:[],
					consigneeName:'',
					consigneeTel:'',
					salesmanName:""
				},//物流表单
				arrivalDateShow:false,
				dateNow:'',//当前时间
				addOutform:{
					
				},//出库单子级
				orderData:{},
				outchilldform:{},
				logisicList:[]
			};
		},
		onLoad(e) {
			if(e.outId){
				this.outId=e.outId
			}else{
				 this.outId=e.id
			}
		
			
			  this.dateNow = this.getNowTime()
		},
		created() {
		this.getOutInfiApi()	
		},
		onPullDownRefresh(){
			this.getOutInfiApi()
			setTimeout(() => {
				 
			    uni.stopPullDownRefresh()
			}, 2000)
		},
		methods:{
			// 获取出库单详情
			async getOutInfiApi(){
				let res= await outOrderinfo(this.outId) 
			 
				this.Outform.orderNo=res.data.orderNo
				this.Outform.outboundNo=res.data.outboundNo
				this.Outform.orderId=res.data.orderId
				this.Outform.parentId=res.data.id
				let res1=await getOrder(res.data.orderId)
			    
				this.orderData=JSON.parse(JSON.stringify(res1.data))
				this.Outform.customerName=res1.data.customerName
				this.Outform.customerId=res1.data.customerId
				this.Outform.orderType=res1.data.orderType
				this.Outform.totalDailyRent=res1.data.totalDailyRent
				this.Outform.outboundWarehouseId=res1.data.deliveryWarehouseId
				this.Outform.outboundWarehouseName=res1.data.deliveryWarehouseName
				 this.Outform.projectName=res1.data.projectName
				this.Outform.salesmanName=res1.data.salesmanName
				// this.outform.sponsor=JSON.parse(JSON.stringify(res1.data.sponsor))
				this.Outform.sponsorName=res1.data.sponsorName
				this.Outform.consigneeName=res1.data.consigneeName
				this.Outform.consigneeTel=res1.data.consigneeTel
				this.Outform.projectName=res1.data.projectName
				this.Outform.deliveryWarehouseName=res1.data.deliveryWarehouseName
				this.Outform.address=res1.data.address
			
				this.Outform.productList=JSON.parse(JSON.stringify(res1.data.productList))
				this.Outform.materialSpecification=res1.data.accessoriesInstruction
				this.Outform.shippingType=this.orderData.shippingType
				this.Outform.logistics=res1.data.logistics
				// 物流信息展示
				let res2= await getLogisticsListApi({orderNo:this.Outform.orderNo,orderProperty:'1'})
				this.logisicList=res2.rows
			},
			addlogInfo(){
				this.logicShow=true
			 getNoApi({orderId:this.Outform.orderId}).then(res=>{
				 this.addlogisticForm.outboundNo=res.data.outboundNo
			 })
			 this.addlogisticForm.consigneeName=this.Outform.consigneeName
			 this.addlogisticForm.consigneeTel=this.Outform.consigneeTel
			 this.addlogisticForm.orderNo=this.Outform.orderNo
			 this.addlogisticForm.orderId=this.Outform.orderId
			this.addlogisticForm.projectAddress=this.Outform.address
			this.addlogisticForm.projectName=this.Outform.projectName
			this.addlogisticForm.customerName=this.Outform.customerName
			this.addlogisticForm.warehouseName=this.Outform.deliveryWarehouseName
			this.addlogisticForm.shippingType=this.Outform.shippingType
			 this.addlogisticForm.salesmanName=this.Outform.salesmanName
			  
			 var arr=[]
			  arr=this.Outform.productList
			 arr.forEach(item=>{
				  delete item.deliveryQuantity
				  delete item.id
				  delete item.orderId
				  delete item.returnApplyQuantity
				  delete item.returnQuantity
				  delete item.searchStatus
				  delete item.undeliveryQuantity
				  delete item.dailyTotalRent
				  item.orderProperty='1'
			 })
			 this.addlogisticForm.logisticsProductList=JSON.parse(JSON.stringify(arr))
			},
			// 提交物流
			async btnLogic(){
				//先提交出单子级
				this.Outform.productList=[]
				this.Outform.outboundNo=this.addlogisticForm.outboundNo
				await addOrderApi(this.Outform)
				// 再提物流单
				await addLogisticsApi(this.addlogisticForm)
				 this.addlogisticForm=[],
				 this.logicShow=false
				// let res= await getLogisticsListApi({outboundNo:this.Outform.outboundNo})
				// this.logisicList=res.rows
				// 页面刷新
				await this.getOutInfiApi()
			},
			// 修改物流信息
			editlogistic(val){
				val.outId=this.outId
				 uni.navigateTo({
				 	url:'/pages/logistic/editlogistic/editlogistic?item='+encodeURIComponent(JSON.stringify(val))
				 })
			},
			// 校验数量
			isquantity(val,index){
				console.log(val,index);
				// 订单产品数量
				var quantityNum=0
				// 订单关联产品数量
				this.Outform.productList.forEach(item=>{
					if(item.model==val.model){
					quantityNum+=Number(item.quantity)
					}
					
				})
				
				// 当前型号已填写数量
				var quqntityNumed=0
				this.logisicList.forEach(item=>{
                     item.logisticsProductList.forEach(items=>{
						 if(items.model==val.model){
							 quqntityNumed+=items.quantity
						 }
					 })
				})
			
				var that=this
				 if(val.quantity>quantityNum-quqntityNumed){
					 this.$refs.uToast.show({
						 type:'warning',
						 message:`可填写数量为${quantityNum-quqntityNumed},请重新填写`,
						 complete(){
							 console.log(that.addlogisticForm);
							 that.addlogisticForm.logisticsProductList[index].quantity=0
						 }
					 })
				 }
				
			},
			// 获取当前时间
			getNowTime() {
			    var date = new Date()
			    var month = date.getMonth() + 1;
			    var time = date.getFullYear() + "-" + month + "-" + date.getDate();
			    return time;
			},
			arrivalDateConfirm(e) {
			    console.log(e);
			    this.addlogisticForm.arrivalDate = this.getTime(e.value)
			    this.arrivalDateShow = false
			},
			// 时间格式化
			getTime(val) {
			    var date = new Date(val);
			    var year = date.getFullYear(); //年 ,从 Date 对象以四位数字返回年份
			    var month = date.getMonth() + 1; //月 ,从 Date 对象返回月份 (0 ~ 11) ,date.getMonth()比实际月份少 1 个月
			    var day = date.getDate(); //日 ,从 Date 对象返回一个月中的某一天 (1 ~ 31)
			    //修改月份格式
			    if (month >= 1 && month <= 9) {
			        month = "0" + month;
			    }
			    //修改日期格式
			    if (day >= 0 && day <= 9) {
			        day = "0" + day;
			    }
			    var currentFormatDate = `${year}-${month}-${day}`;
			    return currentFormatDate
			},
			back(){
				uni.navigateBack({delta:1})
			}
		}
	}
</script>

<style lang="scss">
   .pages{
	   background-color: #fff;
	   .form{
		   background-color: #fff;
		   padding-left: 10px;
	   }
   }
</style>
